<template>
<div class="ma-2">
  <v-text-field
      v-model="content"
      hint="输入关键词"
      messages="输入关键词查找文章"
  >
    <template v-slot:prepend>
      <v-icon @click="search">mdi-magnify</v-icon>
    </template>
    <template v-slot:append>
      <v-icon @click="clear">mdi-close</v-icon>
    </template>
  </v-text-field>
</div>
</template>

<script>
export default {
  name: "search",
  props:{
    info:Object
  },
  data(){
    return{
      content:undefined
    }
  },
  methods:{
    clear(){
      this.content = undefined
      this.$store.commit('setSearch',this.content)
    },
    search(){
    this.$store.commit('setSearch',this.content)
    }

  }
}
</script>

<style scoped>

</style>